#06 Magic ! layout props

14th鐵人賽 framer-motion

Rosa

2022-09-19 23:39:40

741 瀏覽

分享至

華麗的特效很炫沒錯，但往往伴隨著效能卡頓的問題 QQ。在網頁完整渲染的過程，會經過一系列的步驟，直到讓使用者看見畫面，光是改變元素大小，就會使流程在走一遍，這對瀏覽器是非常複雜的。

來源自 : https://gist.github.com/faressoft/36cdd64faae21ed22948b458e6bf04d5

有些 CSS 屬性改變會觸發一整個過程，尤其是改變物理上的距離、大小 (margin 、 width 等等)，不過並不是所有的過程都必須經歷，在優化上可以盡量選擇影響幅度小的屬性，例如 : transform 就是一個好選擇。

舉例文字畫線的動畫就可以好幾種方法表示 :

這幾種牽涉網頁渲染路徑各有不同，會發現 width 跟 right 多走了一個步驟

在 motion API 有提供 layer props ，把會使瀏覽器操作 layout 的部份進行優化，改成較少效能消耗的 transform，至於怎麼做呢 ? 初步了解是這樣的 :

運用投射的概念，先算出目前元素跟最後動畫變更的中心點
利用 transform 移動到正確中心點位置
按照比例伸縮，但子元素也會被伸縮影響導致失真，伸縮前計算子元素的反伸縮比
使用 scale 來縮放到最後動畫的大小

這裡只講到大概的原理，實際上應該會有產生正確位置的元素，並且在最後做交換。

有興趣可以參考 Matt Perry (framer motion 的維護者之一) 在 2020 Next.js conf 上簡單解釋 layout props 做哪些事，以及他在新的 motion library 上更深入的解釋。

<motion.div
    className="panBox"
    animate={{
        background: theme ? "#ABD9FF" : "#182747",
    }}
    >
    <motion.span
        className="panThumb"
        animate={{
            background: theme ? "#fa0" : "#182747",
            // 位移是使用 x 而不是 flex 的排版
            x: theme ? 0 : "calc(100px - 40px)",
            rotate: theme ? 0 : -160,
            // 罪魁禍首在這裡
            boxShadow: theme
                ? "inset 0px 0px rgb(0, 0, 0,0)"
                : "inset 15px 8px #fa0",
        }}
        transition={{
            duration: 1,
        }}
        onPan={(e, info) => {
            if (info.offset.x < 0) {
                setTheme(true);
            }
            if (info.offset.x > 0) {
                setTheme(false);
            }
        }}
    />
</motion.div>

接著補上我們的 layout 跟提到的修正方案 :

.panBox{
    // 改成 flex，不用再測距離
    display: flex;
    width : 100px;
    height: 40px;
    border: 1px solid #aaa;
    justify-content: flex-start;
    border-radius: 30px;
    box-shadow: 0 3px 5px rgba(0,0,0,.3),
}
// 當 theme 變化而觸發
.panBox[data-theme=false]{
    justify-content: flex-end;
}

.panThumb{
    //display: inline-block; 有 flex 之後就不用額外設定 inline-block 屬性
    width: 40px;
    height: 40px;
    cursor: pointer;  
    border-radius: 50%;
}

// JS
<motion.div
  className="panBox"
  data-theme={theme}
  layout // 有用到 flex 排版，使用 layout 補強
  animate={{
      background: theme ? "#ABD9FF" : "#182747",
  }}
  >
  <motion.span
      className="panThumb"
      layout
       animate={{
          background: theme ? "#fa0" : "#182747",
          rotate: theme ? 0 : -160,
          /* 改成動畫值 */
          boxShadow: theme
              ? "inset 15px 8px rgba(255, 170, 0,0)"
              : "inset 15px 8px rgba(255, 170, 0,1)",
      }}
      onPan={(e, info) => {
          if (info.offset.x < 0) {
              setTheme(true);
          }
          if (info.offset.x > 0) {
              setTheme(false);
          }
      }}
    />
</motion.div>

或者另一種還我漂漂拳，打回 style ，效果也是一樣的

style={{
    boxShadow: theme
            ? "inset 15px 8px rgba(255, 170, 0,0)"
            : "inset 15px 8px rgba(255, 170, 0,1)",
}}

一天又平安的滑過去了，感謝 layout 的努力

阿嬤你怎麼沒感覺 ? transform 要用在區塊級元素

初期常常寫出不知所以然的 CSS style，不知道什麼原因導致動畫不能動 QQ，曾經對著 span 操作 transform ，結果 span 一動也不動，這是因為 inline 屬性並沒有 transform 可以操作，像是 block 或 inline- 的屬性就可以。

參考 : CSS Transforms Module Level 1

A transformable element is an element in one of these categories:

all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],